<template>
	<view class="mine-page page">
		<view class="info-block">
			<view class="info-list">
				<view class="form-title">添加银行卡</view>
				<view class="form-item">
					<view class="name-item">
						<view class="must">*</view>
						<view class="name">姓名</view>
					</view>
					<view class="form-content">
						<input placeholder="请输入持卡人姓名" v-model="form.bankUserName" placeholder-class="input-placeholder"
							placeholder-style="color:#000;" style="width: 100%;" maxlength="150" />
					</view>
				</view>
				<view class="form-item">
					<view class="name-item">
						<view class="must">*</view>
						<view class="name">银行卡号</view>
					</view>
					<view class="form-content">
						<input placeholder="请输入银行卡号" v-model="form.bankNum" placeholder-class="input-placeholder"
							placeholder-style="color:#000;" style="width: 100%;" maxlength="19" />
					</view>
				</view>
				<view class="form-item">
					<view class="name-item">
						<view class="must">*</view>
						<view class="name">开户银行</view>
					</view>
					<view class="form-content">
						<picker @change="bindBankChange" range-key="bankName" :value="industryIndex" :range="bankList"
							class="form-crl1">
							{{bankIndex==-1 ? '请选择开户银行':bankList[bankIndex].bankName}}
						</picker>
						<view class="right">
							<view class="iconfont icon-gengduo"></view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="name-item">
						<view class="must">*</view>
						<view class="name">开户支行</view>
					</view>
					<view class="form-content">
						<input placeholder="请输入开户支行" v-model="form.bankBranch" placeholder-class="input-placeholder"
							placeholder-style="color:#000;" style="width: 100%;" maxlength="150" />
					</view>
				</view>
			</view>
		</view>
		<view class="btn-item">
			<button class="submit-normal" @click="submitForm">
				<text style="color: #FFFFFF;">确定</text>
			</button>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		getBankList,
		saveBank
	} from '@/api/monetization.js'
	export default {
		data() {
			return {
				form: {
					bankUserName: '',
					bankNum: '',
					bankName: '',
					bankBranch: '',
					type: 2
				},
				rules: {
					bankUserName: {
						name: '持卡人姓名',
						required: true
					},
					bankNum: {
						name: '银行卡号',
						required: true
					},
					bankName: {
						name: '开户银行',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择开户银行')
							}
							callback();
						}
					},
					bankBranch: {
						name: '开户支行',
						required: true
					},
				},
				bankList: [],
				bankIndex: -1,
			}
		},
		onLoad() {
			this.bankData();
		},
		methods: {
			bankData() {
				getBankList().then(res => {
					this.bankList = res
				})
			},
			bindBankChange(e) {
				this.bankIndex = e.detail.value
				this.form.bankName = this.bankList[this.bankIndex].bankName
			},
			submitForm() {
				if (validate(this.form, this.rules)) {
					saveBank(this.form).then(() => {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 1000,
							mask: true,
							success: function() {
								setTimeout(function() {
									uni.redirectTo({
										url:'/page_other/monetization/payment'
									})
								}, 1000)
							},
						})
					}).finally(() => {
						uni.stopPullDownRefresh();
					})
				}
			}
		},
		onShow() {}
	}
</script>

<style lang="scss">
	.mine-page {
		overflow: hidden;

		.tips-block {
			background-color: #D6E0FF;
			color: #0256FF;
			width: calc(100% - 60rpx);
			display: flex;
			margin-top: 26%;
			margin-left: 30rpx;
			border-radius: 20rpx;
			padding: 30rpx;

			.iconfont {
				line-height: 60rpx;

				.tips-text {
					margin-left: 20rpx;
				}
			}
		}

		.info-block {
			padding: 30rpx;
			background-color: #F7F6F9;

			.info-list {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.form-item:last-child {
					border-bottom: none;
				}

				.form-title {
					font-family: FZHanZhenGuangBiaoS-GB;
					font-size: 16px;
					font-weight: bold;
					line-height: 50px;
					display: flex;
					align-items: center;
					letter-spacing: 0em;

					/* 主色 */
					color: #FF2F34;
				}

				.form-item {
					display: flex;
					flex-direction: column;
					border-bottom: 1px solid #F7F7F7;
					padding-bottom: 30rpx;
					margin-top: 30rpx;

					.name-item {
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;

						.must {
							color: #EA0000;
						}

						.name {
							font-size: 30rpx;
						}
					}

					.form-content {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;


						.city {
							position: absolute;
							z-index: 3;
							padding-top: 120rpx;
							padding-left: 40rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							font-size: 30rpx;
						}

						.form-crl1 {
							width: calc(100% - 80rpx);
							font-size: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.form-crl {
							width: 100%;
							font-size: 30rpx;
						}

						.right {
							display: flex;
							align-items: center;

							.iconfont {
								color: #CDCDCD;
								font-size: 32rpx;
							}
						}
					}

					.upload {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;

						.image-item {
							margin-top: 20rpx;
							margin-right: 20rpx;
							display: flex;
							flex-direction: row;
							// box-sizing: border-box;
							// border: 1px solid #efefef;

							.img {
								width: 190rpx;
								height: 200rpx;
								border-radius: 20rpx;
							}

							.iconfont {
								.delete {
									width: 20px;
									height: 20px;
									position: absolute;
									margin-left: -30rpx;
								}
							}
						}

						.image-item:nth-child(3n) {
							margin-right: 0;
						}

						.delete-item {
							width: 100%;
							display: flex;
							justify-content: flex-end;

							.delete {
								width: 20px;
								height: 20px;
								position: absolute;
							}
						}

						.image-item1 {
							display: flex;
							flex-direction: row;

							.delete {
								margin-top: 10rpx;
								margin-left: -40rpx;
								width: 20px;
								height: 20px;
								position: absolute;
							}
						}

						.upload-content {
							position: relative;
							background: #fafafa;
							border-radius: 5px;
							width: 200rpx;
							height: 200rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 20rpx;

							.title {
								position: absolute;
								top: 50%;
								left: 50%;
							}

							.upload {
								width: 90rpx;
								height: 90rpx;
							}
						}
					}
				}
			}
		}

		.btn-item {
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
		}

		.submit-normal {
			width: 288px;
			height: 50px;
			border-radius: 50px;
			opacity: 1;
			background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
		}
	}
</style>